<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ZZTY</title>
<!-- BOOTSTRAP STYLES-->
<link href="../css/bootstrap-datetimepicker.css" rel="stylesheet" />
<!-- CUSTOM STYLES-->

<link rel="stylesheet"
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script
	src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<link href="/SpringMVCMybatis/css/bootstrap-datetimepicker.css"
	rel="stylesheet" />
<link href="/SpringMVCMybatis/css/bootstrap.css" rel="stylesheet" />
<link href="/SpringMVCMybatis/css/bootstrap.min.css" rel="stylesheet" />
<link href="/SpringMVCMybatis/css/custom.css" rel="stylesheet" />



<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
	var s = new Array();

Date.prototype.format = function (fmt) {
    var o = {
        "M+": this.getMonth() + 1, //月份
        "d+": this.getDate(), //日
        "h+": this.getHours(), //小时
        "m+": this.getMinutes(), //分
        "s+": this.getSeconds(), //秒
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
        "S": this.getMilliseconds() //毫秒
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}

function setdate(date){

		var day1 = new Date();
  		day1.setDate(day1.getDate()+date);
 		var s1 = day1.format("yyyy-MM-dd");
		$("#date").val(s1)
		var date= $("#date").val()
}

	function deleteRow(row,array) {
			var i = row.parentNode.parentNode.rowIndex;
			document.getElementById("tquestions").deleteRow(i);
			var d=tableval(row,1);
			  var r = new Array();
  for(var i = 0, l = array.length; i < l; i++) {
    
     
      if (JSON.stringify(array[i].val).substring(1,JSON.stringify(array[i].val).length-1)!=d){
      
    r.push(array[i]);}
  }
  s=r;
	}
	
	function fenye(val){
						$("#tablequestion").empty()
			
					$.getJSON("fenye?num="+val, function(result) {
					
					$.each(result, function(i, field) {
					
				$("#tablequestion").append("<tr><td><input type='checkbox' id='td1' value="+field.id+">" + field.id + "</td><td>" + field.content +"</td></tr>");

			});
		
		
		});	
	}
	
	//去重
	function uniqueList(array){
  var r = [];
  for(var i = 0, l = array.length; i < l; i++) {
    for(var j = i + 1; j < l; j++)
      //关键在这里
      if (JSON.stringify(array[i]) == JSON.stringify(array[j])) j = ++i;
    r.push(array[i]);
  }
  return r;
}
	
		function add(arr){
		arr=uniqueList(arr);
			for(var i=0;i<arr.length;i++){
    $("#tquestions").append("<tr><td style='display:none;'>"+arr[i].id+"</td>"+"<td>"+arr[i].val+"</td><td><input type='button'  onclick='deleteRow(this,s)' value='删除'></td></tr>");
	}
	}
	
	function tableval(column,column1){
		//获取点击的一行tr
    var a = $(column).parent().parent();
    //获取tr的所有td元素
    var b = a.children("td");
    //取得第二列元素
    var c = b.eq(column1);
    //显示第二列的值
    var d= c.text();
	return d;
	}
	
	$(document).ready(function() {
	

	
		//设置时间
	setdate(0);
	$("#tomorrow").click(function(){
	setdate(1);	
	$("#tomorrow").attr("class","btn btn-default active")
	$("#today").attr("class","btn btn-default")
	})
	$("#today").click(function(){
	setdate(0);
	
	$("#today").attr("class","btn btn-default active")
	$("#tomorrow").attr("class","btn btn-default")
	})
 
 		 $("body").on('click','#tiku',function(){
			//清空分页
			$("#ul1").empty()

 			//分页
			for (var i = 0; i < ${Num}; i++) {
				$("#ul1").append("<li><a id='a1' href='#' value="+i+">" + (i + 1) + "</a></li>")
			}
			
			fenye(0);
			})
 
 
		 $("body").on('click','#a1',function(){
			//分页*10来确定内容
			var val=parseInt($(this).attr("value"))*10;
			fenye(val);
			})
	 
		 
		 
	$("body").on('click','#td1',function(){

    var d= tableval(this,1);
    
    s.push({id:$(this).val(),val:d});
	});
	//模态框提交
	//tquestions-最终题目
	$("#tijiao1").click(function(){
	$("#tquestions").empty();
    $("#tquestions").append("<tr><th style='display:none;'>题号</th><th>题目</th><th>删除</th></tr>");

	
	add(s)


	})
	
	//添加题目 提交
	$("#tianjia").click(function(){
	if($("#tquestion").val()==""){
alert("不能为空")
}else{
	$("#tquestions").empty();
    $("#tquestions").append("<tr><th style='display:none;'>题号</th><th>题目</th><th>删除</th></tr>");

    s.push({id:"",val:$("#tquestion").val()});
    
	add(s)
		$("#tquestion").val("");
	
}
			
	})
	
	
//最终提交
	var Questions="";
	var result="";
	$("#tijiao").click(function(){
 if(date.length<1){
	
	alert("请输入时间")
	
	}else{
	s.forEach(function (item) {
    if(item.id==""){        
    result=result+item.val+"-";}
    else{
  	Questions=Questions+item.id+"%7C";}
  	})
	$.ajaxSettings.async = false;	
	Questions=Questions.substring(0, Questions.length-3);
   	if($("#optionsRadios1").is(":checked")){
  		$.ajaxSettings.async = false;	
  	   	$.getJSON("insert?insert=insertteam&date="+$("#date").val()+"&content="+result+"&Questions="+Questions, function(result) {
  	   	alert("成功")

  	   	});	 
  		window.location.reload();
  	}else{
  		$.ajaxSettings.async = false;	
  	   	$.getJSON("insert?insert=insertself&date="+$("#date").val()+"&content="+result+"&Questions="+Questions, function(result) {
  	   	alert("成功")
  	   	}); 
	  	window.location.reload();
	
	} 

	} 
	})
	})
	
</script>
</head>


<body>
	<div id="wrapper">
		<nav class="navbar navbar-default navbar-cls-top " role="navigation"
			style="margin-bottom: 0">
			<div class="navbar-header">
				<!--                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse"> -->
				<!--                     <span class="sr-only">Toggle navigation</span> -->
				<!--                     <span class="icon-bar"></span> -->
				<!--                     <span class="icon-bar"></span> -->
				<!--                     <span class="icon-bar"></span> -->
				<!--                 </button> -->
				<a class="navbar-brand">自在天原</a>
			</div>
			<div
				style="color: white; padding: 15px 50px 5px 50px; float: right; font-size: 16px;">
				<form action="../loginOut.jsp" method="post">
					<button type="submit" class="btn btn-danger">注销</button>







				</form>
			</div>
		</nav>
		<!-- /. NAV TOP  -->
		<nav class="navbar-default navbar-side" role="navigation">
			<div class="sidebar-collapse">
				<ul class="nav" id="main-menu">
					<li class="text-center"></li>


					<!-- 					<li><a href="index.jsp"><i -->
					<!-- 							class="fa fa-dashboard fa-3x"></i> 主页</a></li> -->
					<!-- 					<li><a href="UserInfo.jsp"><i class="fa fa-table fa-3x"></i> -->
					<!-- 							个人信息</a></li> -->
					<li><a href="../selfgread"><i
							class="fa fa-desktop fa-3x"></i> 竞赛批改</a></li>
					<li><a href="../teamgread"><i class="fa fa-qrcode fa-3x"></i>
							结对批改</a></li>
					<li><a href="AssginTask"><i
							class="fa fa-bar-chart-o fa-3x"></i> 竞赛布置</a></li>
					<li><a href="../group/group"><i
							class="fa fa-bar-chart-o fa-3x"></i> 结对分组</a></li>
					<li><a href="../SearchScore/toSearch"><i
							class="fa fa-bar-chart-o fa-3x"></i> 学生成绩</a></li>
					<li><a href="../Data"><i
							class="fa fa-bar-chart-o fa-3x"></i> 数据库查询</a></li>
					<!-- 					<li><a href="ChangePassword.jsp"><i -->
					<!-- 							class="fa fa-edit fa-3x"></i> 密码修改 </a></li> -->

				</ul>

			</div>

		</nav>
		<!-- /. NAV SIDE  -->
		<div id="page-wrapper">
			<div id="page-inner">

				<div class="container">
					<form action="#" class="form-horizontal" role="form">
						<fieldset>
							<legend>布置作业</legend>
							<div class="form-group">
								<center>
								<a class="btn  btn-default active" id="today"  role="button">今日</a>
								<a class="btn  btn-default" id="tomorrow"  role="button">明日</a>

									<p>
										<input type="date" id="date">
								</center>

								<div class="form-group">
									<label for="dtp_input2" class="col-md-2 control-label">结对/竞赛</label>
									<div class="radio">
										<label> <input type="radio" name="taskType"
											id="optionsRadios1" value="team"  />结对
										</label> <label> <input type="radio" name="taskType"
											id="optionsRadios1" value="self"  checked/>竞赛
										</label>
									</div>

								</div>



								<div class="form-group">
									<label for="dtp_input2" class="col-md-2 control-label">添加题目：</label>
									<div class="form-group col-md-5">
										<textarea class="form-control" name="tquestion" id="tquestion"
											rows="8"></textarea>
									</div>
								</div>

								<div class="form-group">
									<div for="dtp_input2" class="col-md-2 control-label"></div>

									<div class="form-group col-md-5">
										<a class="btn  btn-default" role="button" id="tianjia">添加</a>
										<a class="btn  btn-default" id="tiku" data-toggle="modal"
											data-target="#myModal" role="button">题库</a>
									</div>
								</div>

								<div class="form-group">
									<label for="dtp_input2" class="col-md-2 control-label">最终题目：</label>
									<div class="col-md-6">
										<!--   Basic Table  -->
										<div class="panel panel-default">

											<div class="panel-body">
												<div class="table-responsive">
													<table name="tableQuestions"
														class="table table-striped table-bordered table-hover"
														id="tquestions"
														style="word-break: break-all; word-wrap: break-all;">
														<tr>
															<th style="display:none;">题号</th>
															<th>题目</th>
															<th>删除</th>
														</tr>
														<tbody>


														</tbody>
													</table>
												</div>
											</div>
										</div>
									</div>
								</div>
								<input type="hidden" id="formQids" name="formQids"></input>
								<div class="form-group">
									<div for="dtp_input2" class="col-md-4 control-label"></div>
									<div class="form-group col-md-5">
										<button type="submit" id="tijiao"
											class="btn btn-primary btn-default">提交</button>
									</div>
								</div>
						</fieldset>
						<input type="hidden" name="q_ids"></input>
					</form>


					<!-- 模态框（Modal） -->
					<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
						aria-labelledby="myModalLabel" aria-hidden="true">
						<input type="hidden" id="hquesions"></input>
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal"
										aria-hidden="true">×</button>
									<h4 class="modal-title" id="myModalLabel">题库</h4>
								</div>
								<div class="modal-body">




									<div class="panel panel-default">
										<div class="panel-heading"></div>
										<div class="panel-body">
											<div class="table-responsive">
												<table
													class="table table-striped table-bordered table-hover"
													id="tablequestion">
													<!-- <thead>
														<tr>
															<th></th>
															<th>题目</th>

														</tr>
													</thead> -->

												</table>
											</div>

										</div>
										<div align="center">
											<ul class="pagination" id="ul1">
											</ul>
										</div>



									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-default"
											data-dismiss="modal">关闭</button>
										<button type="button" class="btn btn-primary"
											data-dismiss="modal" id="tijiao1">提交更改</button>
									</div>
								</div>
								<!-- /.modal-content -->
							</div>
							<!-- /.modal-dialog -->
						</div>
						<!-- /.modal -->



					</div>
					<!-- /. PAGE INNER  -->
				</div>
				<!-- /. PAGE WRAPPER  -->
			</div>

			<!-- 	<script type="text/javascript">
				$('.form_date').datetimepicker({
					language : 'fr',
					weekStart : 1,
					todayBtn : 1,
					autoclose : 1,
					todayHighlight : 1,
					startView : 2,
					minView : 2,
					forceParse : 0
				});
			</script> -->
</body>
</html>
